<template>
	<view class="root">
		<view class="ml-30 mr-30 mt-30 mb-30">
			<label class="fs-30 fw-500 lh-2">
				<text class="color-ff4a5b">*</text>
				<text class="color-1b1b1b">车辆拍照上传</text>
			</label>
			<text class="fs-24 color-999 lh-2">最多上传9张照片</text>
			<view class="fd-row flex-wrap mt-30">
				<image
					v-for="(src, index) in uploads"
					:key="src"
					class="upload-photo bgc-eee br-10 mb-20"
					:src="src"
					mode="aspectFill"
					@click="imageHandle(index)"
				/>
				<image
					v-if="uploads.length < 9"
					@click="chooseImage"
					src="/static/images/upload-image.png"
					class="upload-photo bgc-eee br-10 mb-20"
					mode="aspectFill"
				/>
			</view>
		</view>

		<view v-if="!type" class="ml-30 mr-30 mt-30 mb-30">
			<label class="fs-30 fw-500 lh-2">
				<text class="color-ff4a5b">*</text>
				<text class="color-1b1b1b">车辆信息描述</text>
			</label>

			<textarea
				v-model="description"
				class="bgc-eee fs-26 br-10 mt-30 pl-30 pr-30 pt-30 pb-30 width-auto"
				placeholder="描述车辆信息，例如：车辆有划痕"
			/>
		</view>

		<button
			hover-class="tap-hover"
			class="btn-submit lh-100 br-48 color-fff fs-32"
			@click="submit"
		>
			确认提交
		</button>
	</view>
</template>

<script lang="ts">
	import { $config } from "@/common";
	import { Storage } from "@/libs/utils";
	import Vue from "vue";
	import Component from "vue-class-component";

	@Component
	export default class submitInformation extends Vue {
		// component property
		uploads: string[] = [];
		description: string = "";

		type: "check" | "finish" | void = void 0;
		order_id: number = 0;

		onLoad({ type, order_id }: AnyObject) {
			type && (this.type = type);
			order_id && (this.order_id = +order_id);
		}
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.uploads.length,
				success: ({ tempFilePaths }) => {
					this.uploads.push(...tempFilePaths);
				},
			});
		}

		submit() {
			uni.showLoading({ title: "Loading..." });
			if (!this.uploads.length) {
				uni.hideLoading();
				uni.showToast({ title: "请先上传照片", icon: "none" });
				return;
			}

			let uploaded: string[] = [];

			const submitData = () => {
				switch (this.type) {
					case "check":
						this.request
							.get("/employee/changeOrderStatus", {
								order_id: this.order_id,
								status: 2,
								img: uploaded.join(","),
							})
							.then(uni.navigateBack);
						break;
					case "finish":
						this.request
							.get("/employee/changeOrderStatus", {
								order_id: this.order_id,
								status: 4,
								img: uploaded.join(","),
							})
							.then(uni.navigateBack);
						break;
					default:
						this.request
							.get("/employee/addInformation", {
								content: this.description,
								img: uploaded.join(","),
							})
							.then(({ msg: title }) => {
								uni.showToast({
									title,
									success: () =>
										setTimeout(uni.navigateBack, 1500),
								});
							});
						break;
				}
			};
			this.uploads.forEach((filePath) => {
				uni.uploadFile({
					url: $config.API_URL + "/employee/upimg",
					filePath,
					name: "file",
					header: { token: Storage.get("userInfo").token },
					success: ({ data: result }) => {
						const { data, code, msg: title } = JSON.parse(result);
						if (!code) {
							uni.showToast({
								title,
								icon: "none",
							});
							return;
						}

						uploaded.push(data);

						uploaded.length === this.uploads.length && submitData();
					},
					fail: uni.hideLoading,
				});
			});
		}

		imageHandle(index: any) {
			uni.showActionSheet({
				itemList: ["查看", "移除"],
				success: ({ tapIndex }) => {
					if (tapIndex) {
						this.uploads.splice(index, 1);
						return;
					}
					uni.previewImage({
						urls: this.uploads,
						current: index,
					});
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	.upload-photo {
		width: 140rpx;
		height: 140rpx;
		margin-right: 30rpx;
	}

	.btn-submit {
		margin: 60rpx 30rpx;
		background: linear-gradient(-90deg, #1ba0ff, #2857ff);
	}
</style>